import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import './HeroSection.css';

const HeroSection = () => {
  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.3
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  return (
    <section className="hero-section">
      <div className="hero-overlay"></div>
      <div className="container hero-container">
        <motion.div 
          className="hero-content"
          variants={containerVariants}
          initial="hidden"
          animate="visible"
        >
          <motion.h1 className="hero-title" variants={itemVariants}>
            创意与技术的完美结合
          </motion.h1>
          <motion.p className="hero-subtitle" variants={itemVariants}>
            我是batype，一名充满激情的全栈开发者，专注于创建美观、实用且高性能的数字体验
          </motion.p>
          <motion.div className="hero-buttons" variants={itemVariants}>
            <Link to="/portfolio" className="btn btn-primary">
              浏览作品集
            </Link>
            <Link to="/contact" className="btn btn-outline">
              联系我
            </Link>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default HeroSection;
